#clock {
width: 600px;
height: 600px;
border: 12px solid #111;
border-radius: 100%;
position:absolute ;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.kedu{
width: 16px;
height: 520px;
border-top: 30px solid #111 ;
border-bottom:30px solid #111;
position: absolute;
left: 292px;
top: 10px;
}
.kedu::before{
content:'';
display: block;
width: 16px;
height: 520px;
border-top: 10px solid #111;
border-bottom: 10px solid #111;
top: -30px;
transform: rotate(30deg) ;
position: absolute;
}
/* .kedu::after {
transform: rotate(60deg);
position: absolute;
} */

.kedu::after {
content: '';
display: block;
width: 16px;
height: 520px;
border-top: 10px solid #111;
border-bottom: 10px solid #111;
top: -30px;
transform: rotate(60deg);
position: absolute;
}


#kedu2{
    width: 16px;
        height: 520px;
transform: rotate(90deg);
}

#pot{
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #f00;
position: absolute;
left: 290px;
top: 290px;
}
#ss{
width: 8px;
height: 300px;
background-color: #333;
position: absolute;
left: 296px;
top: 50px;
transform-origin: 50% 250px;
transform: rotate(120deg);
animation: am01 60s linear infinite;
}
#mm{
width: 12px;
height: 250px;
background-color: #333;
position: absolute;
left: 294px;
top: 100px;
transform-origin: 50% 200px;
transform: rotate(-120deg);
animation: am02 3600s linear infinite;
}
#hh{
width: 16px;
height: 200px;
background-color: #333;
position: absolute;
left: 292px;
top: 150px;
transform-origin: 50% 150px;
transform: rotate(30deg);
animation: am03 43200s steps(60) infinite;
}
@keyframes am01 {
from {
transform: rotate(0deg);

}

to {
transform: rotate(360deg);

}
}
@keyframes am02{
from {
transform: rotate(270deg);
}

to {
transform: rotate(630deg);
}
}
@keyframes am03 {
from {
transform: rotate(280deg);
}

to {
transform: rotate(640deg);
}
}